<template>
    <div>
        <div id="head" v-if="citys[area]">
            {{citys[area].name}}优惠政策介绍
        </div>
        <div id="other" @click="showCity()">去其他城市看看>></div>
        <div id="policy">
            <div v-for="policy in policys" :key="policy.text" :style="{'background-image': 'url('+ policy.bg +')'}">
                {{policy.text}}
            </div>
        </div>
        <div id="bg" v-if="citys[area]">
            <div>{{citys[area].name}}政策背景</div>
            <div>
                {{citys[area].name}}加大对中小企业的金融支持力度与财税支持力度是有效促进产业优化发展的重要举措。缓解中小企业融资难度，优化中小企业的发展环境，降低了中小企业的融资成本，进一步减轻了企业社会负担。本栏目将为您详细介绍关于申请中小企业产业扶持以及融资担保费补贴等相关办事事项。
            </div>
        </div>
        <div id="flow">
          <div class="fitem" v-for="(flow, i) in flows" :key="flow.text[0]" :style="{'background-image': 'url('+ flow.icon +')'}">
            <div>{{flow.text[0]}}</div>
            <div>{{flow.text[1]}}</div>
            <div class="fdown" v-if="i != flows.length - 1"></div>
          </div>
        </div>
        <div id="msg">
            <lslide :height="8.4">
                <litem name="最新资讯">
                    <Sitem v-for="msg in zx" :key="msg.img" :msg="msg"/>
                    <more url="/news/"/>
                </litem>
                <litem name="常见问题">
                    <div style="height: 0.3rem"></div>
                    <Aitem v-for="msg in ques" :key="msg.img" :msg="msg"/>
                    <more url="/zt/105"/>
                </litem>
            </lslide>
        </div>
        <div id="contact">
          <div @click="consult()">在线咨询</div>
          <router-link to="/consult/3/预约税务专家" tag="div">预约税务专家</router-link>
        </div>
    </div>
</template>
<script>
import lslide from "./public/LSlide_cs";
import litem from "./public/Litem";
import Sitem from "./public/Sitem";
import Aitem from "./public/Aitem"
import more from "./public/More"
import { Get, Post, Port } from "../../server/ajax";
export default {
  data() {
    return {
      citys: {
        gz: { name: "广州" },
        sz: { name: "深圳" },
        zq: { name: "肇庆" },
        sh: { name: "上海" },
        hz: { name: "杭州" },
        mas: { name: "马鞍山" },
        tz: { name: "台州" },
        wz: { name: "乌镇" },
        hf: { name: "合肥" },
        rz: { name: "日照" },
        zs: { name: "舟山" },
        fy: { name: "阜阳" },
        af: { name: "安福" },
        ja: { name: "吉安" },
        wh: { name: "武汉" },
        cs: { name: "长沙" },
        hg: { name: "黄冈" },
        lhk: { name: "老河口" },
        nn: { name: "南宁" },
        bj: { name: "北京" },
        tj: { name: "天津" },
        nq: { name: "内丘" },
        yq: { name: "阳泉" },
        cc: { name: "长春" },
        qq: { name: "重庆" },
        cd: { name: "成都" },
        gy: { name: "贵阳" },
        my: { name: "绵阳" },
        lz: { name: "兰州" },
        wlmq: { name: "乌鲁木齐" }
      },
      policys: [
        {
          text: "电子商务产业优惠政策",
          bg: require("../assets/jieshao/i_bg_0.png")
        },
        {
          text: "高新技术企业税收优惠政策",
          bg: require("../assets/jieshao/i_bg_1.png")
        },
        {
          text: "电子商务产业优惠政策1",
          bg: require("../assets/jieshao/i_bg_2.png")
        }
      ],
      flows: [
        {
          icon: require("../assets/jieshao/icon_0.png"),
          text: ["电话咨询上门解读", "400-1667-880"]
        },
        {
          icon: require("../assets/jieshao/icon_1.png"),
          text: ["指定优惠方案", "为企业提供一对一服务"]
        },
        {
          icon: require("../assets/jieshao/icon_2.png"),
          text: ["签署合作协议", "洽谈成功"]
        },
        {
          icon: require("../assets/jieshao/icon_3.png"),
          text: ["待办实施", "遵照解决方案"]
        }
      ],
      zx: null,
      ques: null
    };
  },
  props: ["area"],
  components: {
    lslide,
    litem,
    Sitem,
    Aitem,
    more
  },
  created() {
    this.$parent.$parent.tState = 1;
    this.$parent.$parent.fState = 1;
  },
  activated() {
    setTimeout(function(){
      this.$parent.$parent.updata();
    }.bind(this), 10)
  },
  mounted() {
    Post(`${Port}/mobile/cms/news`, {
      page_size: 3
    }, function(data){
      this.zx = data
    }.bind(this))
    Post(`${Port}/mobile/cms/subjects`, {
      page_size: 2
    }, function(data) {
      this.ques = data
    }.bind(this))
  },
  methods: {
    showCity() {
      this.$parent.$parent.cshow = true
      this.$parent.$parent.ctype = 1
    },
    consult() {
      location.href = 'https://qiyukf.com/client?k=3bb03a223ff45e6fc1e527ce74cd25e3&u=&d=elxhcgubcppxvblfv3bv&uuid=toevh0zihxwvonhknh3z&gid=0&sid=0&qtype=0&dvctimer=0&robotShuntSwitch=0&hc=0&robotId=0&t=%25E5%258C%2597%25E4%25BA%25AC%25E5%2590%2588%25E7%2590%2586%25E9%2581%25BF%25E7%25A8%258E_%25E5%258C%2597%25E4%25BA%25AC%25E4%25BC%2581%25E4%25B8%259A%25E9%2581%25BF%25E7%25A8%258E%25E8%258A%2582%25E7%25A8%258E_%25E5%258C%2597%25E4%25BA%25AC%25E7%25A8%258E%25E7%25AD%25B9%25E4%25BC%2598%25E5%258C%2596_%25E7%2588%25B1%25E5%2591%2598%25E5%25B7%25A5'
    }
  }
};
</script>
<style scoped>
#head {
  height: 3.23rem;
  background-size: cover;
  background-position: center center;
  background-image: url("~@/assets/jieshao/banner.png");
  font-size: 0.42rem;
  color: #fff;
  text-align: center;
  padding-top: 1rem;
}
#other {
  height: 0.8rem;
  background-color: #f4f5f7;
  font-size: 0.28rem;
  line-height: 0.8rem;
  text-align: center;
  color: #666;
}
#policy {
  padding: 0.96rem 0;
}
#policy > div {
  width: 6.98rem;
  height: 2.31rem;
  margin-left: 0.26rem;
  background-size: cover;
  font-size: 0.3rem;
  color: #333;
  line-height: 2.31rem;
  text-indent: 0.45rem;
  margin-bottom: 0.2rem;
}
#bg {
  height: 8.48rem;
  padding-top: 1.5rem;
  background-image: url("~@/assets/jieshao/b_bg.png");
  background-size: cover;
  text-align: center;
}
#bg > div:nth-child(1) {
  display: inline-block;
  font-size: 0.32rem;
  color: #333;
  line-height: 0.72rem;
  font-weight: bold;
  border-bottom: 0.04rem solid #ed5172;
}
#bg > div:nth-child(2) {
  padding: 0.84rem 0.86rem 0;
  text-align: left;
  font-size: 0.28rem;
  color: #666;
}
#flow {
  padding: 1rem 0 0 2.3rem;
}
.fitem {
  height: 2rem;
  background-size: 0.8rem 0.8rem;
  background-repeat: no-repeat;
}
.fitem > div:nth-child(1) {
  /* display: inline-block; */
  margin-left: 1.15rem;
  color: #333;
  font-size: 0.28rem;
}
.fitem > div:nth-child(2) {
  /* display: inline-block; */
  margin-left: 1.15rem;
  color: #666;
  font-size: 0.28rem;
}
.fdown {
  margin: 0.35rem 0.35rem 0;
  width: 0.11rem;
  height: 0.54rem;
  background-image: url("~@/assets/jieshao/down.png");
  background-size: cover;
}
#contact {
  display: flex;
  justify-content: space-around;
  height: 2rem;
  background-color: #f4f5f7;
  padding-top: 0.66rem;
  text-align: center;
  line-height: 0.7rem;
  font-size: 0.32rem;
}
#contact > div {
  width: 3.3rem;
  height: 0.7rem;
  border-radius: 0.35rem;
  letter-spacing: 0.02rem;
}
#contact > div:nth-child(1) {
  border: 0.01rem solid #ababab;
  color: #333;
}
#contact > div:nth-child(2) {
  background-color: #ed5172;
  color: #fff;
}
</style>